乌镇 · 涟漪 · 动画二维码名片

涟漪（SVG动画）

1

（长按月亮可识别二维码）

近一周在浙江传媒学院主讲本科生的小学期课程，趁着周末和助教琪音去到一趟乌镇。

比较闹。唯一静下的时刻，是在一家明信片咖啡厅。

倚窗而望，喉咙沁过百香果柠檬茶，街道上的喧嚣被格挡在透明的轩窗外……而上面这张黑白线稿正是当时从二楼拍摄到的，原彩色图如下▼

回来后，对这张图有一些想法，于是先做了黑白处理▼

再经过 Ai 描摹和路径扩展后，得到了黑白的画面线稿。

接下来，我希望实现一种波光粼粼的效果。其实在线稿中，白色的水波部分是无路径的，所以琪音给了一个很好的建议：将「涟漪区」复制一份，做<translate>上下位移。

相比一下，如果使用闪烁等方式，需要很复杂的细节设计。而这种位移方式，只需要将「涟漪区」通过一个复合路径快速获取，并通过群组完成动画。

更进一步，涟漪的区域让人想到二维码的视觉效果，所以它可以成为一张古镇的二维码动画名片！因而，我在右下方放置了一个倾斜矢量二维码。但考虑到用户不一定会注意，加之矢量路径无法长按，所以必须辅之以一个位图素材。

琪音的建议是加上一个“人工月亮”，这样也确保了水面光影的合理性。所以我在画面内上传了一张月亮的位图，通过<margin>把它强行移动到画面中的合理位置。基于 JZ 在《“一键关注”失效？两种神排版恢复！》提到的二维码截图式识别原则，最终你可以通过长按月亮，识别到一个矢量的二维码。

以上，就是在游玩之余的一个二维码 SVG 动画小创作，欢迎大家学习。或需要定制高级交互图文和二维码名片，请致电：

021 37218818

定制咨询 [phone]

版权所有 JZ多媒体解决方案